<div id="database" class="page-layout carded fullwidth inner-scroll">

    <!-- TOP BACKGROUND -->
    <div class="top-bg accent"></div>
    <!-- / TOP BACKGROUND -->

    <!-- CENTER -->
    <div class="center">

        <!-- HEADER -->
        <div class="header accent"
             fxLayout="column" fxLayoutAlign="center center"
             fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">

            <!-- APP TITLE -->
            <div class="logo mb-24 mb-sm-0"
                 fxLayout="row" fxLayoutAlign="start center">
                <mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
                    shopping_basket
                </mat-icon>
                <span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">数据字典</span>
            </div>
            <!-- / APP TITLE -->

            <!-- SEARCH -->
            <div class="search-wrapper  ml-sm-32">
                <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
                    <mat-icon>search</mat-icon>
                    <input #filter placeholder="Search for an database">
                </div>
            </div>
            <!-- / SEARCH -->

        </div>
        <!-- / HEADER -->

        <!-- CONTENT CARD -->
        <div class="content-card">

            <mat-table class="database-table"
                       #table [dataSource]="dataSource"
                       matSort
                       [@animateStagger]="{value:'50'}"
                       basePerfectScrollbar>

                <!-- Name Column -->
                <ng-container matColumnDef="name">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>表名</mat-header-cell>
                    <mat-cell *matCellDef="let database">
                        <p class="text-truncate">
                            {{database.name}}
                        </p>
                    </mat-cell>
                </ng-container>

                <!-- 表引擎 Column -->
                <ng-container matColumnDef="engine">
                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>表引擎</mat-header-cell>
                    <mat-cell *matCellDef="let database" fxHide fxShow.gt-md>
                        <p class="total-price text-truncate">
                            {{database.engine}}
                        </p>
                    </mat-cell>
                </ng-container>

                <!-- 字符集 Column -->
                <ng-container matColumnDef="collation">
                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>字符集</mat-header-cell>
                    <mat-cell *matCellDef="let database" fxHide fxShow.gt-sm>
                        <p class="text-truncate">
                            {{database.collation}}
                        </p>
                    </mat-cell>
                </ng-container>

                <!-- 数据行数 Column -->
                <ng-container matColumnDef="rows">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>数据行数</mat-header-cell>
                    <mat-cell *matCellDef="let database">
                        <p class="text-truncate">
                            {{database.rows}}
                        </p>
                    </mat-cell>
                </ng-container>

                <!-- 索引大小 Column -->
                <ng-container matColumnDef="index_lenght">
                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>索引大小</mat-header-cell>
                    <mat-cell *matCellDef="let database" fxHide fxShow.gt-sm>
                        <p class="text-truncate">
                            {{database.index_lenght}}
                        </p>
                    </mat-cell>
                </ng-container>

                <!-- 数据大小 Column -->
                <ng-container matColumnDef="data_lenght">
                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>数据大小</mat-header-cell>
                    <mat-cell *matCellDef="let database" fxHide fxShow.gt-sm>
                        <p class="text-truncate">
                            {{database.data_lenght}}
                        </p>
                    </mat-cell>
                </ng-container>

                <!-- 注释 Column -->
                <ng-container matColumnDef="comment">
                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>注释</mat-header-cell>
                    <mat-cell *matCellDef="let database" fxHide fxShow.gt-sm>
                        <p class="text-truncate">
                            {{database.comment}}
                        </p>
                    </mat-cell>
                </ng-container>

                <!-- 创建时间 Column -->
                <ng-container matColumnDef="update_time">
                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>创建时间</mat-header-cell>
                    <mat-cell *matCellDef="let database" fxHide fxShow.gt-sm>
                        <p class="text-truncate">
                            {{database.update_time}}
                        </p>
                    </mat-cell>
                </ng-container>

                <mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>

                <mat-row *matRowDef="let database; columns: displayedColumns;"
                         class="order"
                         matRipple
                         [routerLink]="'/apps/e-commerce/orders/'+database.id">
                </mat-row>
            </mat-table>

            <mat-paginator #paginator
                           [length]="dataSource.filteredData.length"
                           [pageIndex]="0"
                           [pageSize]="10"
                           [pageSizeOptions]="[5, 10, 25, 100]">
            </mat-paginator>

        </div>
        <!-- / CONTENT CARD -->
    </div>
    <!-- / CENTER -->
</div>
